<template>
  <div>
    <div :class="nofirst?'':'c-pl20'">
      <div class="c-textAlign-l" v-for="(item,index) in treeData" :class="isNodeflag(item,index)" :key="index">
        <div class="c-flex-row c-flex-center" :class="isNodeStyle(item)" @click.stop="toggleNode(item,nofirst)" :id= item.libraryId >
          <div v-if="nofirst&&(checkBox &&!item.children)" class="iconfont c-fs24 c-pl20" :class="item.isCheckd?'icon-duihao1 c-fc-mblue':'icon-weigouxuan c-fc-gray'"></div>
          <div v-if="!nofirst&&(checkBox &&!item.children)" class="iconfont c-fs24 c-mr18" :class="item.isCheckd?'icon-duihao1 c-fc-mblue':'icon-weigouxuan c-fc-gray'"></div>
          <div class="c-fc-xblack c-fs24 c-textAlign-l c-flex-grow1" :class="nofirst?'c-ml18':''">{{item.name}}{{!item.children?" ("+item.hasQuestionNum+"题)":''}}</div>
          <div v-if="item.children" class="iconfont c-fc-sgray c-fs24 change-time c-inlineblack change-time" :class="{change_rotate:!item.expand}">&#xe6ab;</div>
        </div>
        <q-Tree :treeData="item.children" :nofirst='true' v-if="item.expand" @clickNodeCom="clickNodeCom"  :checkBox="checkBox" :class="{cus_checkbox_allchecked:item.isCheckd}"></q-Tree>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "q-Tree",
  props: ['treeData', 'checkBox', 'nofirst'],
  data() {
    return {
    };
  },
  methods: {
    isNodeflag(item, index) {
      return {
        'c-br10 c-bg-sgray': !item.children || this.nofirst,
        ' c-lh54 c-pr20 c-mb16': item.children && this.nofirst,
        ' c-pv20': !this.nofirst,
        ' c-ph20': !this.nofirst && !item.children
      }
    },
    isNodeStyle(item) {
      return {
        'c-ml-42': item.level == 2 && !item.children,
        'c-lh54 c-pr20 c-mb16': item.level != 3 && !item.children && this.nofirst,
        'c-pr20 c-mb16': item.level == 1 && item.children && !this.nofirst,
      }
    },
    clickNode(item) {
      item.active = true;
      this.$emit('clickNodeCom', item);
    },
    toggleNode(item) {
      if (item.children) {
        item.expand = !item.expand;
      } else {
        this.checkBoxClick(item)
      }
    },
    clickNodeCom(data) {
      this.$emit('clickNodeCom', data);
    },
    checkBoxClick(item) {
      item.partchecked = false;
      if (item.hasQuestionNum == 0) {
        this.$showCjToast({
          text: "该分类没有题目",
          type: "warn",
          time: 1500
        });
        return
      }
      item.isCheckd = !item.isCheckd;
//设置子元素是否勾选
      var checkChildFun = (childrenDatas) => {
        childrenDatas.forEach((m) => {
          m.isCheckd = item.isCheckd;
          if (m.children) {
            checkChildFun(m.children);
          }
        })
      }
      if (item.children) {
        checkChildFun(item.children);
      }
    },
  }
};
</script>

<style scoped>
.change-time {
  transition-duration: 0.3s;
}
.change_rotate {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg);
  transform-origin: 50% 50%;
}
</style>
